<template>
    <!--安全设置白条-->
    <div class="l-setter-bar">
      <!--头部-->
      <div class="l-bar-header">
        <span>{{title}}</span>
        <div><span>{{status}}</span><span @touchstart="route" data-router="router"  class="l-bar-btn">{{btn}}</span></div>
      </div>

      <p>{{tips}}</p>
    </div>
</template>

<script>
    export default {
        name: "setter-item",
        props: {
          title: {
            default: "绑定手机"
          },
          status: {
            default: "未设置"
          },
          btn: {
            default: '修改'
          },
          tips: {
            default: "您绑定的手机：134****3205 若已丢失或停用，请立即更换"
          },
          router: {
            default: "phone"
          },
          phone: {

          }
        },
        data () {
          return {

          }
        },
        methods: {
          route () {
            this.$router.push({name: this.router})
          }
        }
    }
</script>

<style lang="less" scoped>
    .l-setter-bar {
      width: 700px;
      margin: auto;
      padding: 20px;
      border: 1px solid #986d33;
      box-sizing: border-box;
      color: #986d33;
      font-size: 28px;
      margin-bottom: 30px;
    }

    .l-bar-btn {
      display: inline-block;
      margin-left: 30px;
      padding-left: 30px;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        width: 2px;
        height: 30px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-color: #986d33;
       }
    }

    .l-bar-header {
      display: flex;
      justify-content: space-between;
      font-size: 32px;
      font-weight: bold;
      height: 70px;
      line-height: 70px;
    }
</style>
